<template>
	<view class="homeLayout pageBg">
		<custom-nav-bar title="推荐"></custom-nav-bar>
		<view class="banner">
			<swiper circular indicator-dots indicator-color="rgba(255,255,255,0.5)"
			indicator-active-color="#fff" autoplay>
				<swiper-item>
					<image src="/static/images/ban1.png" mode="aspectFill"></image>
				</swiper-item>
				<swiper-item>
					<image src="/static/images/ban2.png" mode="aspectFill"></image>
				</swiper-item>
				<swiper-item>
					<image src="/static/images/ban3.jpg" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="notice">
			<view class="left">
				<uni-icons type="sound-filled" size="20"></uni-icons>
				<text class="text">公告</text>
			</view>
			<view class="center">
				<swiper vertical autoplay interval="1500" duration="300" circular>
					<swiper-item v-for="(item,index) in noticeList" :key="item">
						<navigator :url="item.url">
							{{item.text}}
						</navigator>
					</swiper-item>
				</swiper>
			</view>
			<view class="right">
				<uni-icons type="right" size="16" color="#333"></uni-icons>
			</view>
		</view>
		
		<view class="select">
			<common-title>
				<template #name>每日推荐</template>
				<template #custom>
					<view class="date">
						<uni-icons type="calendar" size="18"></uni-icons>
						<view class="text">
							<uni-dateformat :date="Date.now()" format="dd号"></uni-dateformat>							
						</view>						
					</view>
				</template>
			</common-title>
			<view class="content">
				<scroll-view scroll-x>
					<view class="box" v-for="(item,index) in imageList" :key="index" @click="goPreview(item.src)">					
						<image :src="item.src" mode="aspectFill"></image>
					</view>
				</scroll-view>
			</view>
		</view>
		
		<view class="theme">
			
			<common-title>
				<template #name>专题精选</template>
				<template #custom>
					<navigator url="/pages/classify/classify" open-type="reLaunch" class="more" >More+</navigator>
				</template>
			</common-title>
			
			<view class="content">
				<theme-item v-for="item in themeList" :key="item.id" v-bind="item"></theme-item>
				<theme-item :isMore="true" image="/static/images/rw4.jpg" category="更多" updateTime=""></theme-item>
			</view>
			
		</view>
		
	</view>
</template>

<script setup>

import { ref } from 'vue';
import {onShareAppMessage,onShareTimeline} from "@dcloudio/uni-app";

//分享给好友
onShareAppMessage((e)=>{
	return {
		title:"小秋壁纸，好看的手机壁纸",
		path:"/pages/index/index"
	}
})

//分享朋友圈
onShareTimeline(()=>{
	return {
		title:"小秋壁纸，好看的手机壁纸"
	}
})

//每日推荐图片集
const imageList = ref([
  { src: '/static/images/cs1.jpg' },
  { src: '/static/images/cs2.jpg' },
  { src: '/static/images/cs3.jpg' },
  { src: '/static/images/cs4.jpg' },
  { src: '/static/images/fj5.jpg' }
])

//公告栏文字
const noticeList = ref([
  { text: '欢迎进入小秋壁纸欣赏景德镇美图！', url: '/pages/notice/detail?id=1' },
  { text: '景德镇陶瓷文化主题壁纸上线，快来欣赏！', url: '/pages/notice/detail?id=2' },
  { text: '参与壁纸评选活动，赢取精美礼品！', url: '/pages/notice/detail?id=3' },
  { text: '关于我们，相关介绍请点击这里！', url: '/pages/notice/detail?id=4' }
])

//
const themeList = ref([
  { id: 1, image: '/static/images/fj1.jpg', category: '风景', updateTime: '3天前更新' },
  { id: 2, image: '/static/images/rw1.jpg', category: '人文', updateTime: '5天前更新' },
  { id: 3, image: '/static/images/ly1.jpg', category: '旅游', updateTime: '1周前更新' },
  { id: 4, image: '/static/images/jz1.jpg', category: '建筑', updateTime: '2周前更新' },
  { id: 5, image: '/static/images/tc1.jpg', category: '陶瓷', updateTime: '1个月前更新' },
  { id: 6, image: '/static/images/ww1.jpg', category: '文物', updateTime: '2个月前更新' },
  { id: 7, image: '/static/images/fj2.jpg', category: '城市', updateTime: '3个月前更新' },
  { id: 8, image: '/static/images/rw2.jpg', category: '夜景', updateTime: '半年前更新' }
])

// 跳转到预览页面，传递图片路径
const goPreview = (imageUrl) => {
  uni.navigateTo({
    url: `/pages/preview/preview?image=${imageUrl}`
  })
}

</script>

<style lang="scss" scoped>
.homeLayout{
	.banner{
		width: 750rpx;
		padding: 30rpx 0;
		swiper{
			width: 750rpx;
			height:340rpx;
			&-item{
				width: 100%;
				height: 100%;
				padding: 0 30rpx;
				image{
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
			}
		}
	}
	.notice{
		width: 690rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: #f9f9f9;
		margin: 0 auto;
		border-radius: 80rpx;
		display: flex;
		.left{
			width: 140rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			:deep(){   //deep()穿透子组件修改样式
				.uni-icons{
					color: $brand-theme-color !important;
				}
			}
			.text{
				color: $brand-theme-color;
				font-weight: 600;
				font-size: 28rpx;
			}
		}
		.center{
			flex: 1;
			swiper{
				height: 100%;
				&-item{
					height: 100%;
					font-size: 30rpx;
					color: #666;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}
		.right{
			width: 70rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	
	.select{
		padding-top: 50rpx;
		.date{
			color: $brand-theme-color;
			display: flex;
			align-items: center;
			:deep(){
				.uni-icons{
					color: $brand-theme-color !important;
				}
			}
			.text{
				margin-left: 5rpx;
			}
		}
		.content{
			width: 720rpx;
			margin-left: 30rpx;
			margin-top: 30rpx;
			scroll-view{
				white-space: nowrap;
				.box{
					width: 200rpx;
					height: 430rpx;
					display: inline-block;
					margin-right: 15rpx;
					image{
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
				}
				.box:last-child{margin-right: 30rpx;}
			}
		}
	}
	
	.theme{
		padding: 50rpx 0;
		.more{
			font-size: 32rpx;
			color: #888;
		}
		.content{
			margin-top: 30rpx;
			padding: 0 30rpx;
			display: grid;//网格布局
			gap: 15rpx;
			grid-template-columns: repeat(3,1fr);//一行显示3个
		}
	}
}
</style>
